<template>
  <view class="service">
    <template v-if="list.length">
      <view class="service-item" v-for="(item, index) in list" :key="index">
        <view class="item-top">
          <u-image
            width="56rpx"
            height="56rpx"
            :src="item.consultantInfo.pic"
            border-radius="50%"
            class="logo"
          ></u-image>
          <text class="item-top_left">{{ item.consultantInfo.iname }}</text>
          <text :class="['item-top_right', 'status-' + item.serviceStatus]">{{
            item.statusDesc
          }}</text>
        </view>
        <view class="item-tips">
          <text class="text" v-if="item.serviceStatus == 5"
            >服务订单已取消，建议询问用户具体原因</text
          >
          <text class="time">{{ item.createTime }}</text>
        </view>
        <view class="item-bottom" v-if="item.serviceStatus != 2">
          <u-button
            shape="circle"
            size="medium"
            type="default"
            :custom-style="customStyle"
            v-if="item.serviceStatus == 4"
            @click="handleCheckEva(item)"
            >查看评价</u-button
          >
          <u-button
            shape="circle"
            size="medium"
            type="primary"
            :custom-style="customStyle"
            v-if="item.serviceStatus == 3 || item.serviceStatus == 4"
            @click="handleCheckSummary(item)"
            >查看总结</u-button
          >
          <!-- <u-button
            shape="circle"
            size="medium"
            plain
            v-if="item.serviceStatus == 1 || item.serviceStatus == 5"
            :custom-style="customStyle"
            >服务记录</u-button
          > -->
          <u-button
            shape="circle"
            size="medium"
            plain
            v-if="item.serviceStatus == 0"
            :custom-style="customStyle"
            @click="handleGoOnService(item)"
            >继续服务</u-button
          >
          <!-- <u-button
            shape="circle"
            size="medium"
            plain
            v-if="item.serviceStatus == 1"
            :custom-style="customStyle"
            >提醒支付</u-button
          > -->
        </view>
      </view>
      <u-loadmore class="job-more" :status="status" :load-text="loadText" />
    </template>
    <u-empty v-else text="服务记录为空" mode="list"></u-empty>
  </view>
</template>

<script>
export default {
  name: "ServiceRecordList",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    status: String,
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 服务记录状态 0服务中/咨询中 1待支付 2已支付/待总结/待交付 3待评价 4已完成 5已取消 6已退款
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      customStyle: {
        marginLeft: "12rpx",
        padding: "10rpx 22rpx",
      },
      serviceName: "在线咨询",
    };
  },

  watch: {
    type: {
      handler(val) {
        if (val == 0) {
          this.serviceName = "在线咨询";
        }
        if (val == 1) {
          this.serviceName = "电话咨询";
        }
        if (val == 2) {
          this.serviceName = "简历优化";
        }
        if (val == 3) {
          this.serviceName = "竞争力分析";
        }
      },
      immediate: true,
    },
  },

  methods: {
    handleGoOnService(item) {
      uni.navigateTo({
        url: `/pagesSub/message/chat/index?personId=${item.fromChatId}`,
      });
    },
    handleCheckSummary(item) {
      let serviceName;
      if (this.type == 0) {
        serviceName = "在线咨询";
      }
      if (this.type == 1) {
        serviceName = "电话咨询";
      }
      if (this.type == 2) {
        serviceName = "简历优化";
      }
      if (this.type == 3) {
        serviceName = "竞争力分析";
      }
      uni.navigateTo({
        url: `/pagesSub/userCenter/summary/index?serviceId=${item.serviceId}&serviceRecordId=${item.serviceRecordId}&serviceName=${serviceName}`,
      });
    },
    handleCheckEva(item) {
      uni.navigateTo({
        url: `/pagesSub/userCenter/evaluateCard/index?serviceRecordId=${item.serviceRecordId}&consultantName=${item.consultantInfo.iname}&serviceName=${this.serviceName}`,
      });
    },
  },
};
</script>

<style lang="scss">
$img-base-interview: $img-base + "interview/";
.service {
  padding: 32rpx 32rpx 24rpx;
  &-item {
    background-color: $uni-bg-color;
    border-radius: 16rpx;
    margin-bottom: $uni-spacing-col-lg;
  }

  .item-top {
    display: flex;
    align-items: center;
    padding: 32rpx 0;
    margin: 0 32rpx;

    &_left {
      font-size: $uni-font-size-base;
      font-weight: bold;
      margin-left: 16rpx;
    }

    &_right {
      font-size: $uni-font-size-base;
      margin-left: auto;
    }

    .status-40 {
      color: $uni-text-color-888;
    }

    .status-0 {
      color: #0083ff;
    }

    .status-30 {
      color: $uni-text-color-warn;
    }

    .status-100 {
      color: $uni-text-color-success;
    }

    .status-50 {
      color: $uni-text-color-error;
    }
  }
  .item-tips {
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    .time {
      margin-left: auto;
    }
  }

  .item-bottom {
    display: flex;
    padding: 32rpx;
    border-top: 2rpx solid #f5f5f5;
    justify-content: flex-end;
  }
}
</style>
